<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<!-- <myTabs :backgroundColor="#fff"></myTabs> -->
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#f0f0f0'"></myTabs>

		<view class="pages_intelligenceBox"  v-if="user.communityList && user.communityList.length">
			<view class="pages_intelligenceItems" @click="isCodeCs(item)" v-for="(item,index) in user.communityList" :key="index">
				<view class="pages_intelligenceItemsImgBox">
					<image mode="aspectFill" :src="item.qrCode"></image>
				</view>
				<view class="pages_intelligenceItemsName">
					{{item.communityName}}
				</view>
				<image class="pages_intelligenceItemsIcon" src="/static/img/leftActionIcon.png"></image>
			</view>
		</view>
		<view class="biaoyuBox" v-else>
			<image class="biaoyuImg" src="/static/img/kongIcon.png"></image>
			<p class="biaoyu">暂无订单～</p>
		</view>
		
		<!-- 社区二维码 -->
			<u-overlay :show="isCode" @click="isCode = false">
				<view class="codeBox" @click.stop="">
					<image v-if="imgSrc" class="codeBoxBg" :src="`${imgSrc}/welcomeBg.png`"></image>
					<view class="codeBoxMainBox">
						<view class="codeBoxMainBox_top">{{communityName}}</view>
						<view class="codeBoxMainBox_topText">
							<p>请长按识别下方二维码加入社群</p>
						</view>
						<view class="codeBoxMainBox_topImg">
							<image mode="aspectFill" :show-menu-by-longpress="true" :src="qrCode"></image>
						</view>
					</view>
					<view class="codeBoxMainBox_botom"  @click.stop="isCode = false">
						确定
					</view>
				</view>
			</u-overlay>
		
	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				title: '我的情报',
				isCode: false,
				communityName: '我的情报',
				qrCode: ''
				

			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			},
			imgSrc() {
				return this.$store.state.imgSrc;
			},
					
		},
		methods: {
			isCodeCs(item){
				this.communityName = item.communityName;
				this.qrCode = item.qrCode;
				this.isCode = true;
				
			},
			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		min-height: 100vh;
		box-sizing: border-box;

		.pages_intelligenceItemsRightBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
		}
		.pages_intelligenceItemsRightBoxTitle{
			background: #fff9dd;
			border-radius: 8rpx;
			height: 42rpx;
			line-height: 42rpx;
			padding: 0 12rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFA102;
		}
		.codeBox{
			width: 638rpx;
			height: 631rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 24rpx;
			overflow: hidden;
			text-align: center;
		}
		.codeBoxBg{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
		.codeBoxMainBox{
			padding: 32rpx 0;
		}
		.codeBoxMainBox_top{
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
			margin-bottom: 32rpx;
		}
		.codeBoxMainBox_topText{
			margin-bottom: 40rpx;
			p{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}
		}
		.codeBoxMainBox_topImg{
			border-radius: 24rpx;
			width: 296rpx;
			height: 296rpx;
			    margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.codeBoxMainBox_botom{
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			font-size: 16px;
			font-family: 蘋方-簡;
			color: #333;
			font-weight: bold;
			border-top: 1rpx solid #ddd;
			box-sizing: border-box;
		}
		
		.pages_intelligenceItemsRightBoxPath{
			display: flex;
			align-items: center;
			span{
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #000000;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}
		.pages_intelligenceBox {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}
		.biaoyuBox{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 240rpx;
		}
		.biaoyuImg{
			width: 320rpx;
			height: 320rpx;
		}
		.biaoyu{
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #999;
			text-align: center;
		}

		.pages_intelligenceItems {
			// width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			display: flex;
			bbox-sizing: border-box;
			margin-bottom: 16rpx;
    align-items: center;
}
		.pages_intelligenceItemsImgBox{
			flex: 0 0 144rpx;
			width: 144rpx;
			height: 144rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-right: 24rpx;
			image{
				width: 100%;
				height: 100%;
				
			}
		}
		.pages_intelligenceItemsName{
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.pages_intelligenceItemsIcon{
			flex: 0 0 24rpx;
			width: 24rpx;
			height: 24rpx;
		}
		// <view class="pages_intelligenceItems" v-for="index in 8" :key="index">
		// 	<view class="pages_intelligenceItemsImgBox">
		// 		<image mode="aspectFill" src="/static/img/haibao.png"></image>
		// 	</view>
		// 	<view class="pages_intelligenceItemsName">
		// 		社群名称社群名称
		// 	</view>
		// 	<image class="pages_intelligenceItemsIcon" src="/static/img/leftActionIcon.png"></image>
		// </view>
		

		.pages_intelligenceItemsLeft {
			flex: 0 0 192rpx;
			width: 192rpx;
			height: 144rpx;
			overflow: hidden;
			border-radius: 24rpx;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.pages_intelligenceItemsRight {
			flex: 1;

		}

		.pages_intelligenceItemsRightText {
			height: 72rpx;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 32rpx;
			color: #666666;
			overflow: hidden;
			text-overflow: ellipsis;
		 display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-bottom: 22rpx;
		}
	}
</style>
